<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap-table.min.js"></script>
    <script src="../../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>

<table id="tab">

</table>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">生产派工</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container"
                     style="padding-bottom:10px ;box-shadow: rgba(144,146,154,0.46) 5px 5px; background-color: whitesmoke;text-align: center">
                    <div>
                        <h2>生产派工单</h2>
                    </div>
                    <div class="">
                        <form>
                            <div class="form-row">
                                <div class="col">
                                    派工单编号： <span id="manufactureId"></span>
                                </div>
                                <div class="col"> &nbsp;
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    产品编号： <span id="productId"></span>
                                </div>
                                <div class="col">
                                    产品名称:<span id="productName"></span>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col">
                                    描述： <span id="describe"></span>
                                </div>
                                <div class="col">
                                    数量:
                                    <span id="quantity"></span>
                                </div>
                            </div>
                            <table id="table1" style="width: 100%; margin-top: 20px">
                                <thead>
                                <tr style="background-color: #a4efef;">
                                    <th>工序名称</th>
                                    <th>设计工时数</th>
                                    <th>实际工时数</th>
                                    <th>设计工时成本</th>
                                    <th>实际工时成本</th>
                                    <th>设计物料成本</th>
                                    <th>实际物料成本</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div class="form-row">
                                <div class="col">
                                    设计工时总成本： <span id="labour_cost_price_sum"></span>
                                </div>
                                <div class="col">
                                    设计物料总成本:
                                    <span id="module_cost_price_sum"></span>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    实际工时总成本： <span id="real_labour_cost_price_sum"></span>
                                </div>
                                <div class="col">
                                    实际物料总成本:
                                    <span id="real_module_cost_price_sum"></span>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col">
                                    登记人： <span id="registrant1"></span>
                                </div>
                                <div class="col">
                                    登记时间:
                                    <span id="registrationTime1"></span>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    复核人： <span id="checker"></span>
                                </div>
                                <div class="col">
                                    复核时间:
                                    <span id="check_time"></span>
                                </div>
                            </div>
                        </form>
                        <div style="margin: 20px 0px">
                            备注：
                            <textarea class="form-control" id="remark1" readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#tab").bootstrapTable({
            method: "post",
            contentType: "application/json",
            striped: true,
            pageNumber: 1,
            pageSize: 5,
            pagination: true,
            sidePagination: 'server',
            pageList: [1, 3, 5, 10],
            url: "/DispatchOrderQuery/QueryDispatchOrder",
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit
                }
            },
            columns: [
                {title: '派序号编号', field: 'manufactureId', align: 'center',formatter:function (value, row, index){
                    return "<button class=\"btn btn btn-link\" data-toggle=\"modal\"  data-target=\"#exampleModal\" onclick='registrationAudit("+value+")'>"+value+"</button>"
                    }},
                {title: '产品编号', field: 'productId', align: 'center',},
                {title: '产品名称', field: 'productName', align: 'center',},
                {title: '投产数量', field: "amount", align: 'center'},
                {title: '合格数量', field: "testedAmount", align: 'center',
                    formatter:function (value,row,index){
                        return (value==null? '<span class=\"btn btn-outline-success\">生产中</span>' :value);
                    }},

                {title: '派工状态', field: "aa", align: 'center',
                    formatter:function(value, row, index){
                        return "<span class=\"btn btn-outline-success\">已派工</span>";
                    }},
                {title: "审核状态", field: "checkTag",align: 'center',
                    formatter: function (value, row, index) {
                        if (value=="s001-0"){
                            return "<span class=\"btn btn-outline-warning\">等待</span>";
                        }else if (value=="s001-1"){
                            return "<span class=\"btn btn-outline-success\">通过</span>";
                        }else{
                            return "<span class=\"btn btn-outline-dark\">不通过</span>";
                        }
                    }
                },
                {title: "生产状态", field: "manufactureProcedureTag",align: 'center',
                    formatter: function (value, row, index) {
                        if (value=="s002-0"){
                            return "<span class=\"btn btn-outline-warning\">待登记</span>";
                        }else if (value=="s002-1"){
                            return "<span class=\"btn btn-outline-danger\">未审核</span>";
                        }else{
                            return "<span class=\"btn btn-outline-success\">已完工</span>";
                        }
                    }
                }
            ]
        })
    })

    function registrationAudit(id) {
        $.ajax({
            type: "post",
            url: "/InternalScheduling/registerDispatching",
            data: "id=" + id,
            success: function (data) {
                $("#manufactureId").text(data.manufactureId);
                $("#productId").text(data.productId);
                $("#productName").text(data.productName);
                $("#describe").text(data.productDescribe);
                $("#quantity").text(data.amount);
                $("#module_cost_price_sum").text(data.moduleCostPriceSum);
                $("#labour_cost_price_sum").text(data.labourCostPriceSum);
                $("#registrant1").text(data.register);
                $("#registrationTime1").text(data.registerTime);
                $("#checker").text(data.checker);
                $("#check_time").text(data.checkTime);
                let procedureList = data.procedureList;
                $("#table1 tbody").html("");
                for (let i = 0; i < procedureList.length; i++) {
                    $("#table1 tbody").append("<tr>" +
                        "<td>" + procedureList[i].procedureName + "</td>" +
                        "<td>" + procedureList[i].labourHourAmount + "</td>" +
                        "<td>" + (procedureList[i].realLabourHourAmount == null ? '' : procedureList[i].realLabourHourAmount) + "</td>" +
                        "<td>" + (procedureList[i].subtotal == null ? '' : procedureList[i].subtotal) + "</td>" +
                        "<td>" + (procedureList[i].realSubtotal == null ? '0' : procedureList[i].realSubtotal) + "</td>" +
                        "<td>" + (procedureList[i].moduleSubtotal == null ? '' : procedureList[i].moduleSubtotal) + "</td>" +
                        "<td>" + (procedureList[i].realModuleSubtotal == null ? '0' : procedureList[i].realModuleSubtotal) + "</td>" +
                        "</tr>");

                }
                var realModuleCostPriceSum=0;
                var realLabourCostPriceSum=0;
                $("#table1 tbody tr").each(function (i,n){
                    realLabourCostPriceSum+=parseInt($(n).find("td").eq(4).text());
                    realModuleCostPriceSum+=parseInt($(n).find("td").eq(6).text());
                })
                $("#real_module_cost_price_sum").text(realModuleCostPriceSum);
                $("#real_labour_cost_price_sum").text(realLabourCostPriceSum);

            }

        })
    }

</script>

</body>
</html>